<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- 2.创建容器 -->
        <div id="app">
            <p>我叫{{ obj.name }},今年{{ obj.age }}</p>
        </div>
    </body>
    <!-- 引用Vuejs库 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        // 提前解构赋值-就不需要单独使用Vue进行调用
        // 3.调用应用程序
        const {createApp,reactive} = Vue
        createApp({
            setup() {
                // 4.创建响应式对象
                let obj = reactive({
                    "name": "vue3",
                    "age": 18
                })
                // 5.返回响应式对象
                return {
                    obj
                }
            }
        }).mount("#app")
    </script>
</html>